<template>
    <div>
        <!--顶部导航-->
        <div class="a1-3">
            <a  @click="goIndex" class="a-4"><img :src="state==7?require('../assets/image/index-17.png'):require('../assets/image/index-15.png')"/></a>
            <ul :class="state==7?'a-5 h-4':'a-5'">
                <li @click="goIndex" :class="state==1?'active':''"><a href="javascript:;">首页</a></li>
                <li  :class="state==2?'active':''"><a href="javascript:;" @click="goListWorks">版权交易</a>
               
                </li>
                <li @click="goListVideo" :class="state==3?'active':''"><a href="javascript:;">影视版权</a></li>
                <li @click="goListNews" :class="state==4?'active':''"><a href="javascript:;">行业资讯</a></li>
                <li @click="goGuide" :class="state==5?'active':''"><a href="javascript:;">交易指引</a></li>
                <li @click="goAbout" :class="state==6?'active':''"><a href="javascript:;">关于我们</a></li>
            </ul>
        </div>
        <div class="a-6" >
            <a href="javascript:;" class="gp-1" @click="goUserIndex">我要挂牌</a>
            <a href="javascript:;" class="a-7" @click="goMyNews"><img :src="state==7?require('../assets/image/user6.png'):require('../assets/image/index-24.png')"/></a>
            <a @click="goIndex" href="javascript:;" class="a-7"><img :src="state==7?require('../assets/image/user15.png'):require('../assets/image/index-7.png')"/></a>
            <div class="a-8">

                <a v-if="!isShowLogin" href="javascript:;" @click="goLogin">登录</a>
                <a v-if="!isShowLogin" href="javascript:;" @click="goRegister">注册</a>
                <a v-if="isShowLogin" href="javascript:;" @click="goUserIndex" class="tx"><img :src="state==7?require('../assets/image/user13.png'):require('../assets/image/tx.png')"/></a>
                <a v-if="isShowLogin" @click="outLogin" class="out" href="javascript:;" style="display: inline-block;vertical-align: middle;border: none;margin-left: 10px;">退出</a>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</template>

<script>
    import {typeList} from '@/api/header'
    import { getToken,removeToken } from '@/utils/auth'
    export default {
        name: "Header",
        data(){
            return{
                isShowLogin:false, //是否登录了
                type:1,  //项目挂牌与作品挂牌类型切换，默认为项目挂牌
                project_type:"",
                works_type:"",
                projectTypeList:[],
                worksTypeList:[],
            }
        },
        props:{
            state:{
                type:Number,
                value:null,
                required:true
            }
        },
        created(){
            this.getTypeList();
            let isLogin = getToken();
            //console.log("isLogin");
           // console.log(isLogin);
            if(isLogin){
              this.isShowLogin=true;
            }else {
              this.isShowLogin=false
            }
        },
        methods:{
            goIndex(){ //前往首页
                this.$router.push('/');
            },
            goListWorks(){ //前往版权交易
                this.$router.push('/listWorks');
            },
            goListVideo(){ //前往影视板块
                this.$router.push('/listVideo');
            },
            goListNews(){ //前往行业资讯
                this.$router.push('/listNews');
            },
            goGuide(){ //前往交易指导
                this.$router.push('/guide');
            },
            goAbout(){ //前往关于我们
                this.$router.push('/about');
            },
            goUserIndex(){   //我要挂牌 -前往个人主页
              this.$router.push('/userIndex');
            },
            goLogin(){ //去登录
              this.$router.push('/login');
            },
            goRegister(){  //去注册
              this.$router.push('/register');
            },
            goMyNews(){
              this.$router.push('/userIndex/myNews');
            },
            outLogin(){
              removeToken();
             // console.log("成功注销");
              this.$router.push('/login');
            },
            getTypeList(){
                typeList().then(response =>{
                  //  console.log(response);
                    this.project_type=response.data.project_type;
                    this.works_type=response.data.works_type;
                    this.projectTypeList=response.data.projectTypeList;
                    this.worksTypeList=response.data.worksTypeList;
                })
            },
            changeType(e){  //切换状态
                this.type=e;
            }
        }
    }
</script>


<style scoped>
    .b-3>li {
        width: 700px;
        margin-bottom: 20px;
        float: left;
        margin-right: 24px;
    }
  .a-8 a{vertical-align: middle;}
  .h-5 .out{color: #262626;}
</style>
